<template>
	<view class="card">
		<view class="cardImg">
			<image :src="info.all_photo?info.all_photo:img" mode="aspectFit"></image>
		</view>
		<view class="cardContent">
			<view class="cardText">
				<view class="cardTitle">
					<view class="myText">
					<text>{{info.name?info.name:'--'}}</text>
						<view v-if="currTag === 1 && info.status === 'cancel'" class="cardTag noPass">
							已撤回
						</view>
					</view>
				</view>
				<view class="cardDesc">
					<view v-if="currTag === 4">
						<text class="cardTag" :class="{'noPass':currSubTag === 2}">{{currSubTag === 1?'已通过':currSubTag === 2?'未通过':info.type === 1?'待确认':'已确认'}}</text>
						<text class="food-kind-num">食材种类:{{info.food_num}} 种</text>
					</view>
					<text v-else>采购单价:{{info.price}} 元</text>
				</view>
				<view class="cardDate">
					<text>{{formatTime(info.create_time, 'Y-M-D h:m')}}</text>
				</view>
			</view>
			<view class="cardOperating">
				<view class="cardButtonGroup" v-if="currTag === 1">
					<view class="cardButton marginRight" @click.stop="operating(1)">
						编辑
					</view>
					<view class="cardButton" @click.stop="operating(0)">
						删除
					</view>
				</view>
				<view class="cardButtonGroup" v-if="currTag === 2">
					<view class="cardButton marginRight">
						打开
					</view>
					<view class="cardButton" @click.stop="operating(1)">
						撤回
					</view>
				</view>
				<!-- -->
				<view class="cardButtonGroup" v-if="currTag === 4 && currSubTag === 1">
					<view class="cardButton" @click.stop="operating(1)">
						打开
					</view>
				</view>
				<view class="active" v-if="currTag === 4 && currSubTag !== 1">
					<view class="btn">
						<view class="cardButton marginRight">
							打开
						</view>
						<view class="cardButton" @click.stop="operating(0)">
							删除
						</view>
					</view>
					<view class="btn marginTop" v-if="info.type === 1">
						<view class="cardButton margin" @click.stop="sureClick">
							确认
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { formatTime } from '@/utils/tools.js'
	export default {
		props: {
			currTag: Number,
			info: Object,
			currSubTag:Number,
			getList: Function
		},
		data() {
			return {
				img: require('../../static/report/foodReport.png'),
				pageSize: 8
			}
		},
		methods:{
			formatTime,
			operating(value){
				
				this.$emit("reportOperating", {value:value, id:this.info.id})
				console.log(this.info)
			},
			sureClick(){
				let creatTime = new Date()
				this.$api.sureType({
					id:this.info.id,
					creatTime: creatTime.getTime()
					}).then(res => {
					console.log(res);
					if(res.status){
						this.$emit('getList')
					}
				}).catch(err =>{
					console.log(err);
				}) 
			},
		},
		
	}
</script>

<style scoped>
	.card {
		height: 100%;
		background-color: #FFF;
		border-radius: 10upx;
		box-shadow: 0 0 15upx 5upx rgba(179, 31, 31, 0.1);
		padding: 17upx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		box-sizing: border-box;
	}

	.cardImg {
		background-color: #ffc8c7;
		height: 146.66upx;
		width: 146.66upx;
		border-radius: 10upx;
		margin-right: 17upx;
	}

	.cardImg image {
		height: 146.66upx;
		width: 146.66upx;
	}

	.cardContent {
		width: 100%;
		display: flex;
		position: relative;
		align-items: center;
	}

	.cardTitle {
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 11upx;
		display: flex;
	}

	.cardTitle .myText {
		word-break: break-all;
	}

	.cardTag {
		background-color: #f7533e;
		color: #FFF;
		font-size: 20upx;
		height: 28upx;
		border-radius: 5upx;
		margin: auto 0 auto 10upx;
		display: inline-block;
		padding: 5upx 10upx;
	}

	.noPass {
		background-color: #ffc8c7 !important;
		color: #666666 !important;
	}

	.cardDesc {
		color: #6d6d6d;
		font-size: 32upx;
		margin-bottom: 19upx;
	}

	.cardDate {
		color: #6d6d6d;
		font-size: 24upx;
	}

	.cardOperating {
		margin-left: auto;
	}

	.cardButtonGroup {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	.active{
		display: block;
	}
	.btn{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	.marginTop{
		margin-top: 10px;
	}
	.cardButton {
		border-radius: 10upx;
		background-color: #ff0000;
		color: #FFF;
		font-size: 28upx;
		padding: 5upx 10upx;
	}

	.cardButton:active {
		background-color: #ffc8c7;
	}

	.marginRight {
		margin-right: 20upx;
	}
	.margin{
		margin-right: 50upx;
	}
	.food-kind-num{
		background: #fff;
		display: inline-block;
		margin-left: 10upx;
		color: #6d6d6d;
font-size: 24rpx;

	}
</style>
